<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui">

<ui:composition template="/template/template-padrao.xhtml">

	<ui:define name="titulo">Manter clientes/fornecedores</ui:define>

	<ui:define name="baseCorpo">
	
		<h:form id="clienteFornecedorForm">
		
		<h:inputHidden id="cpfCnpjHidden" value="#{manterClientesFornecedoresBean.pessoa.cpfCnpj}" />
		
			<script type="text/javascript">
	
				jQuery(function(){
					
					jQuery('input[id*=nomePessoa]').focus();
					
					atualizar();
				
					jQuery('input[name*=tipoPessoa]').change(function () { 
						atualizar();
					});
					
					jQuery('label[for*="tipoPessoa"]').css("font-weight", "normal");
					jQuery('label[id*="labelTipoPessoa"]').css("font-weight", "bold");
					
					jQuery('label[for*="indSexo"]').css("font-weight", "normal");
					jQuery('label[id*="labelIndSexo"]').css("font-weight", "bold");
					
					jQuery('label[for*="despachante"]').css("font-weight", "normal");
				
				});
				
				function atualizar(){
					var valorTipoPessoa = jQuery('input:radio[name*=tipoPessoa]:checked').val();
					
					if(valorTipoPessoa == 'F'){
						jQuery('label[id*="labelNome"]').show();
						jQuery('label[id*="labelCpf"]').show();
						jQuery('input[id*="cpf"]').show();
						jQuery('td[id*="tdIdentidade"]').show();
						jQuery('tr[id*="trEstadoCivilSexo"]').show();
						
						jQuery('label[id*="labelRazaoSocial"]').hide();
						jQuery('label[id*="labelCnpj"]').hide();
						jQuery('input[id*="cnpj"]').hide();
						jQuery('td[id*="tdNomeFantasia"]').hide();
						jQuery('td[id*="tdInscricaoEstadual"]').hide();
						jQuery('td[id*="tdInscricaoMunicipal"]').hide();
						
						limparJuridica();
					}else{
						jQuery('label[id*="labelRazaoSocial"]').show();
						jQuery('td[id*="tdNomeFantasia"]').show();
						jQuery('label[id*="labelCnpj"]').show();
						jQuery('input[id*="cnpj"]').show();
						jQuery('td[id*="tdInscricaoEstadual"]').show();
						jQuery('td[id*="tdInscricaoMunicipal"]').show();
						
						jQuery('label[id*="labelNome"]').hide();
						jQuery('label[id*="labelCpf"]').hide();
						jQuery('input[id*="cpf"]').hide();
						jQuery('td[id*="tdIdentidade"]').hide();
						jQuery('tr[id*="trEstadoCivilSexo"]').hide();
						
						limparFisica();
					}
				}
				
				function limparFisica(){
					jQuery('input[id*="cpfCnpjHidden"]').attr("value", "");
					jQuery('input[id*="cpf"]').attr("value", "");
					jQuery('input[id*="identidade"]').attr("value", "");
					jQuery('input[id*="estadoCivil"]').attr("value", "");
					jQuery('input:radio[name*=indSexo]').attr("value", "");
					jQuery('input:radio[name*=indSexo]').attr("checked", "");
					jQuery('select[id*=estadoCivil]').attr("value", "");
				}
				
				function limparJuridica(){
					jQuery('input[id*="cpfCnpjHidden"]').attr("value", "");
					jQuery('input[id*="cnpj"]').attr("value", "");
					jQuery('input[id*="inscricaoEstadual"]').attr("value", "");
					jQuery('input[id*="inscricaoMunicipal"]').attr("value", "");
				}
				
			</script>
		
			<h1 class="titulo-tela">Manter clientes/fornecedores</h1>

			<p:panel id="panelClienteFornecedor">
			
				<h1 class="ui-panel-titlebar ui-widget-header ui-corner-all">Dados cadastrais</h1>
			
				<table cellspacing="10">
					<tr>
						<td width="250px;">
							<h:outputLabel id="labelTipoPessoa" for="tipoPessoa" 
								value="* Tipo" style="font-weight: bold;" />
							<br />
							<h:selectOneRadio id="tipoPessoa" 
									value="#{manterClientesFornecedoresBean.pessoa.tipoPessoa}">
								<f:selectItem id="fisica" itemLabel="Física" itemValue="F" />
								<f:selectItem id="juridica" itemLabel="Jurídica" itemValue="J" />
								<f:ajax event="change" render="panelTabView" />
							</h:selectOneRadio>
			            </td>
						<td width="250px;">
							<h:selectBooleanCheckbox
								title="emailUpdates" id="despachante"
								value="#{manterClientesFornecedoresBean.pessoa.despachante}" />
							<h:outputLabel for="despachante" value=" Despachante" />
			            </td>
					</tr>
					<tr>
						<td width="250px;">
							<h:outputLabel id="labelNome" for="nomePessoa" value="* Nome:" style="font-weight: bold;" />
							<h:outputLabel id="labelRazaoSocial" for="nomePessoa" value="* Razão social:" style="font-weight: bold;" />
							<br />
							<p:inputText id="nomePessoa" value="#{manterClientesFornecedoresBean.pessoa.nmPessoa}" 
								maxlength="150" style="width:200px;" />
			            </td>
			            <td width="250px;" id="tdNomeFantasia">
							<h:outputLabel for="nomeFantasia" value="Nome fantasia:" style="font-weight: bold;" />
							<br />
							<p:inputText id="nomeFantasia" value="#{manterClientesFornecedoresBean.pessoa.nmFantasiaEmpresa}" 
								maxlength="150" style="width:200px;" />
			            </td>
					</tr>
					<tr>
						<td width="250px;">
							<h:outputLabel id="labelCpf" for="cpf" value="* CPF:" style="font-weight: bold;" />
							<h:outputLabel id="labelCnpj" for="cnpj" value="* CNPJ:" style="font-weight: bold;" />
							<br />
							<p:inputMask id="cpf" value="#{manterClientesFornecedoresBean.pessoa.cpf}" 
								mask="999.999.999-99" style="width:110px;" />
							<p:inputMask id="cnpj" value="#{manterClientesFornecedoresBean.pessoa.cnpj}" 
								mask="99.999.999/9999-99" style="width:140px;" />
			            </td>
			            <td width="250px;" id="tdIdentidade">
							<h:outputLabel for="identidade" value="RG:" style="font-weight: bold;" />
							<br />
							<p:inputText id="identidade" value="#{manterClientesFornecedoresBean.pessoa.identidade}" 
								maxlength="20" style="width:200px;" />
			            </td>
			            <td width="250px;" id="tdInscricaoEstadual">
							<h:outputLabel for="inscricaoEstadual" value="Inscrição estadual:" style="font-weight: bold;" />
							<br />
							<p:inputText id="inscricaoEstadual" value="#{manterClientesFornecedoresBean.pessoa.inscricaoEstadualEmpresa}" 
								maxlength="15" style="width:200px;" />
			            </td>
			            <td width="250px;" id="tdInscricaoMunicipal">
							<h:outputLabel for="inscricaoMunicipal" value="Inscrição municipal:" style="font-weight: bold;" />
							<br />
							<p:inputText id="inscricaoMunicipal" value="#{manterClientesFornecedoresBean.pessoa.inscricaoMunicipalEmpresa}" 
								maxlength="15" style="width:200px;" />
			            </td>
					</tr>
					<tr id="trEstadoCivilSexo">
						<td width="250px;">
							<h:outputLabel for="estadoCivil" value="Estado civil:" style="font-weight: bold;" />
							<br />
							<h:selectOneMenu id="estadoCivil" style="width:130px;" label="Estado civil"
								styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
									value="#{manterClientesFornecedoresBean.pessoa.estadoCivil}">
								    <f:selectItems value="#{manterClientesFornecedoresBean.todosEstadosCivis}" var="civil"
								    	itemValue="#{civil.value}" itemLabel="#{civil.label}"/>
							</h:selectOneMenu>
			            </td>
			            <td width="250px;">
							<h:outputLabel id="labelIndSexo" for="indSexo" value="Sexo:" style="font-weight: bold;" />
							<br />
							<h:selectOneRadio id="indSexo" 
									value="#{manterClientesFornecedoresBean.pessoa.indSexo}">
								<f:selectItem id="masculino" itemLabel="Masculino" itemValue="M" />
								<f:selectItem id="feminino" itemLabel="Feminino" itemValue="F" />
							</h:selectOneRadio>
			            </td>
					</tr>
				</table>
				<br /><br />
				
				<p:panel id="panelTabView" style="border:0; padding:0;">
					<p:tabView>
						<p:tab title="Endereço">
							<table cellspacing="10">
								<tr>
									<td colspan="4">
										<h:outputLabel for="endereco" value="Endereço:" style="font-weight: bold;" />
										<br />
										<p:inputText id="endereco" value="#{manterClientesFornecedoresBean.pessoa.endereco.dscEndereco}" 
											maxlength="100" style="width:465px;" />
						            </td>
								</tr>
								<tr>
									<td width="334px;">
										<h:outputLabel for="cidade" value="Cidade:" style="font-weight: bold;" />
										<br />
										<p:inputText id="cidade" value="#{manterClientesFornecedoresBean.pessoa.endereco.cidade}" 
											maxlength="100" style="width:200px;" />
						            </td>
									<td width="334px;">
										<h:outputLabel for="uf" value="Estado:" style="font-weight: bold;" />
										<br />
										<h:selectOneMenu id="uf" style="width:130px;" label="Estado"
											styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
												value="#{manterClientesFornecedoresBean.pessoa.endereco.estado}">
											    <f:selectItems value="#{manterClientesFornecedoresBean.todasUfs}" var="uf"
											    	itemValue="#{uf.value}" itemLabel="#{uf.label}"/>
										</h:selectOneMenu>
						            </td>
								</tr>
								<tr>
									<td>
										<h:outputLabel for="bairro" value="Bairro:" style="font-weight: bold;" />
										<br />
										<p:inputText id="bairro" value="#{manterClientesFornecedoresBean.pessoa.endereco.bairro}" 
											maxlength="100" style="width:200px;" />
						            </td>
									<td>
										<h:outputLabel for="cep" value="CEP:" style="font-weight: bold;" />
										<br />
										<p:inputMask id="cep" value="#{manterClientesFornecedoresBean.pessoa.endereco.cep}" 
											mask="99999-999" style="width:85px;" />
						            </td>
								</tr>
							</table>
						</p:tab>
						
						<p:tab title="Contato">
							<table cellspacing="10" width="100%">
								<tr>
									<td width="250px;">
										<h:outputLabel for="telefone" value="Telefone:" style="font-weight: bold;" />
										<br />
										<p:inputMask id="telefone" value="#{manterClientesFornecedoresBean.pessoa.meioComunicacao.nrTelefone}" 
											mask="(999) 9999-9999" style="width:120px;" />
						            </td>
									<td width="250px;">
										<h:outputLabel for="fax" value="Fax:" style="font-weight: bold;" />
										<br />
										<p:inputMask id="fax" value="#{manterClientesFornecedoresBean.pessoa.meioComunicacao.nrFax}" 
											mask="(999) 9999-9999" style="width:120px;" />
						            </td>
									<td width="250px;">
										<h:outputLabel for="celular" value="Celular:" style="font-weight: bold;" />
										<br />
										<p:inputMask id="celular" value="#{manterClientesFornecedoresBean.pessoa.meioComunicacao.nrCelular}" 
											mask="(999) 9999-9999" style="width:120px;" />
						            </td>
									<td width="250px;">
										<h:outputLabel for="email" value="Email:" style="font-weight: bold;" />
										<br />
										<p:inputText id="email" value="#{manterClientesFornecedoresBean.pessoa.meioComunicacao.email}" 
											maxlength="50" style="width:250px;" />
						            </td>
								</tr>
							</table>
						</p:tab>
						
						<p:tab rendered="#{manterClientesFornecedoresBean.pessoa.tipoPessoa == 'F'}" title="Profissão">
						<table cellspacing="10" width="100%">
							<tr>
								<td>
									<h:outputLabel for="profissao" value="Profissão:" style="font-weight: bold;" />
									<br />
									<p:inputText id="profissao" value="#{manterClientesFornecedoresBean.pessoa.profissao}" 
										maxlength="50" style="width:200px;" />
					            </td>
								<td>
									<h:outputLabel for="nomeEmpresa" value="Nome da empresa:" style="font-weight: bold;" />
									<br />
									<p:inputText id="nomeEmpresa" value="#{manterClientesFornecedoresBean.pessoa.nmEmpresa}" 
										maxlength="100" style="width:250px;" />
					            </td>
								<td>
									<h:outputLabel for="telefoneEmpresa" value="Telefone da empresa:" style="font-weight: bold;" />
									<br />
									<p:inputMask id="telefoneEmpresa" value="#{manterClientesFornecedoresBean.pessoa.telefoneEmpresa}" 
										mask="(999) 9999-9999" style="width:120px;" />
					            </td>
							</tr>
						</table>
					</p:tab>
					</p:tabView>
				</p:panel>
			</p:panel>
			
			<br />
			<div align="right">
				<p:commandButton id="botaoSalvar" value="Salvar" update="msgSistema, clienteFornecedorForm, listaRegistros" 
					actionListener="#{manterClientesFornecedoresBean.salvarClienteFornecedor}" style="margin-left:5px;" />
				<p:commandButton id="botaoLimpar" value="Limpar" update="msgSistema, clienteFornecedorForm" 
					 actionListener="#{manterClientesFornecedoresBean.limparCampos}" style="margin-left:5px;" />
			</div>
		
		</h:form>
		
		<h:form id="listaRegistros">
			
			<br />
			<br />
			<p:accordionPanel autoHeight="false" collapsible="true" style="padding:0;">
			<p:tab title="Clientes e fornecedores">
			
				<p:dataTable id="listaClienteFornecedor" var="pessoa" 
					paginator="true" rows="10" paginatorPosition="bottom"
					value="#{manterClientesFornecedoresBean.todasPessoas}"
		            emptyMessage="Nenhum cliente ou fornecedor encontrado">
		            
			        <p:column filterBy="#{pessoa.nmPessoa}" 
			                headerText="Nome/Razão social" filterMatchMode="contains">
			            <h:outputText value="#{pessoa.nmPessoa}" />
			        </p:column>
			        
			        <p:column filterBy="#{pessoa.cpfCnpj}" 
			                headerText="CPF/CNPJ" filterMatchMode="contains">
			            <h:outputText value="#{pessoa.cpfCnpj}" />
			        </p:column>
			        
			        <p:column style="width:90px;" headerText="Ações">
			        	<p:commandButton update="clienteFornecedorDetalhesForm" image="ui-icon ui-icon-search" immediate="true"
			            	oncomplete="dialogClienteFornecedorDetalhes.show()">
			               <f:setPropertyActionListener value="#{pessoa}"
			                    target="#{manterClientesFornecedoresBean.pessoaAux}" />
			            </p:commandButton>
			            <p:commandButton update="clienteFornecedorForm" image="ui-icon ui-icon-pencil" immediate="true">
			               <f:setPropertyActionListener value="#{pessoa}"
			                    target="#{manterClientesFornecedoresBean.pessoa}" />
			            </p:commandButton>
			            <p:commandButton oncomplete="confirmation.show()" image="ui-icon ui-icon-trash" immediate="true">
			               <f:setPropertyActionListener value="#{pessoa}"
			                    target="#{manterClientesFornecedoresBean.pessoaAux}" />
			            </p:commandButton>
			        </p:column>
			        
			    </p:dataTable>
			    
		    </p:tab>
			</p:accordionPanel>
		    
		</h:form>
		
		<h:form>
		    <p:confirmDialog message="Deseja excluir o cliente/fornecedor?"
						header="Confirmação" severity="alert" widgetVar="confirmation">
						
				<p:commandButton value="Sim" update="clienteFornecedorForm, msgSistema, listaRegistros" 
							oncomplete="confirmation.hide()" immediate="true"
							actionListener="#{manterClientesFornecedoresBean.excluirClienteFornecedor}" />
				<p:commandButton value="Não" onclick="confirmation.hide()" type="button" immediate="true" /> 
						
			</p:confirmDialog>
		</h:form>
		
	<ui:include src="clientefornecedordetalhes.xhtml" />

	</ui:define>

</ui:composition>
</html>